<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginFormRef"
        label-width="0px"
        :model="loginForm"
        class="login_form"
        :rules="formRules"
      >
        <!-- 用户名 -->
        <el-form-item prop="id">
          <el-input
            v-model="loginForm.id"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            type="password"
          >
          </el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="checkUser">员工登录</el-button>
          <el-button type="primary" @click="checkAd">管理员登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {},
      formRules: {
        id: [{ required: true, message: "请输入员工号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    openFail() {
      this.$notify.error({
        title: "失败",
        message: "员工号码或者密码错误",
      });
    },
    adOpenFail() {
      this.$notify.error({
        title: "失败",
        message: "管理员号码或者密码错误",
      });
    },
    openSuc() {
      this.$notify.success({
        title: "成功",
        message: "登陆成功",
      });
    },
    checkUser() {
      this.$axios
        .get("/EmployeeInfo/login", {
          params: {
            id: this.loginForm.id,
            password: this.loginForm.password,
          },
        })
        .then((req) => {
          if (req.data) {
            this.$store.commit("storeID", this.loginForm.id);
            this.$router.push({
              path: "/EmHome",
            }),
              this.openSuc();
          } else {
            this.openFail();
          }
        });
    },

    checkAd() {
      this.$axios
        .get("/AdminInfo/login", {
          params: {
            id: this.loginForm.id,
            password: this.loginForm.password,
          },
        })
        .then((req) => {
          if (req.data) {
            this.$store.commit("storeID", this.loginForm.id);
            this.$router.push({
              path: "/AdHome",
            }),
              this.openSuc();
          } else {
            this.adOpenFail();
          }
        });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.login_container {
  background-image: url(@/img/admin.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #f2f2f2;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login_box .avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.login_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>